import './index.less';

import { Stars } from '@react-three/drei';
import { Canvas } from '@react-three/fiber';
import React from 'react';

import sceneStore from '@/stores/scene';

import AirPlane from './AirPlane';
import Forest from './Forest';
import Land from './Land';
import Sky from './Sky';
import Sun from './Sun';

const BackgroundScene = () => {
  const mode = sceneStore(state => state.mode);
  return (
    <div className="background-scene">
      <Canvas
        camera={{ fov: 60, position: [0, 150, 100], far: 10000, rotation: [-Math.PI * 0.02, 0, 0] }}
        shadows
      >
        {mode === 'night' && <color attach="background" args={['#000']} />}
        <fog attach="fog" color={mode === 'day' ? '#f7d9aa' : '#000'} near={100} far={950} />
        <hemisphereLight color={0xaaaaaa} groundColor={0x000000} intensity={1} />
        <directionalLight
          color={mode === 'day' ? '#fff' : '#555'}
          position={[0, 350, 350]}
          castShadow
          intensity={4}
          shadow-mapSize={2048}
          shadow-bias={-0.001}
        >
          <orthographicCamera attach="shadow-camera" args={[-650, 650, 650, -650, 1, 1000]} />
        </directionalLight>
        {mode === 'night' && (
          <Stars count={5000} depth={10} factor={30} fade radius={1000} saturation={0} speed={1} />
        )}

        <AirPlane />
        {mode === 'day' && <Sun />}
        <Land />
        <Forest />
        <Sky />
      </Canvas>
    </div>
  );
};

export default BackgroundScene;
